<template>
	<view class="container">
		<cu-custom style="height: 0px;" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			 <block slot="content">添加文件</block>
		</cu-custom>
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="formData">
				<uni-forms-item label="名称" required>
					<uni-easyinput v-model="formData.FileName" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label="描述">
					<uni-easyinput type="textarea" v-model="formData.FileDesc" placeholder="请输入描述" />
				</uni-forms-item>
				<uni-forms-item label="文件">
					<uni-file-picker @delete="deleteFile" @select="selectFile" v-model="formData.fileList" limit="3" file-mediatype="all" title="最多选择3个文件"  :auto-upload="false"></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="publish-goods-wrap">
			<view class="publish-goods-btn" @click="sub">提交</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
	data() {
		return {
			formData:{
				FileName:'',
				FileDesc:'',
				Files:'',
				fileList: []
			},
			customerName:'',
			fileListOpt:[]
		};
	},
	mounted() {
	},
	computed: {
	},
	onLoad() {
		let that=this
		that.getCustomerName();
	},
	onShow(){
		let that=this
	},
	methods: {
		getCustomerName(){
			let that=this
			let opts = {
				url: 'api/getCustomerName',
				method: 'get'
			};
			request.httpTokenRequest(opts).then(res => {
				if(res.data.code == 1){
					that.customerName=res.data.msg
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})	
		},
		//11
		deleteFile(res){
			let that=this
			console.log(res)
			let {tempFile: {uuid}} = res
			let Index = null
			let tar = that.formData.fileList.filter((file, index) => {
				if (file.uuid == uuid) {
					Index = index
				}
			})[0]
			if (typeof Index == 'number') {
				that.formData.fileList.splice(Index, 1)
			}
		},
		selectFile(res){
			let that=this
			let {tempFiles, tempFilePaths} = res
			tempFiles.forEach(ele => {
				let {name, url, uuid, file} = ele
				that.formData.fileList.push({
						name,
						url,
						file,
						uuid,
				})
			})
		},
		sub(){
			let that=this
			that.fileListOpt=[]
			that.formData.Files=[]
			if(!that.formData.FileName){
				uni.showToast({ title: '请填写本次上传名称', icon: 'none' });
				return
			}
			if(that.formData.fileList.length==0){
				uni.showToast({ title: '请选择文件', icon: 'none' });
				return
			}
			if(that.formData.fileList.length>3){
				uni.showToast({ title: '一次只能上传3个文件', icon: 'none' });
				return
			}
			uni.showLoading({
				title:'上传中...'
			})
			that.uploadFile().then(() => {
				uni.hideLoading();
				let opts = {
					url: 'SpareApi/AddQrcodeFiles',
					method: 'post'
				};
				that.formData.Files=that.fileListOpt
				request.httpTokenRequest(opts,that.formData).then(res => {
					if(res.data.code == 1){
						uni.showToast({ title:'添加成功', icon: '/static/success.png' });
						
						uni.$emit('IsRefresh',true)
						uni.navigateBack({
							delta: 1
						});
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				})
			});
			
			
			
		
		},
		uploadFile(){
			let that=this
			return new Promise((resolve, reject) =>  {
				let token =uni.getStorageSync('userdata').token;
				for(let i=0;i<that.formData.fileList.length;i++){
					let file=that.formData.fileList[i]
					let tempFile=file.url
					uni.uploadFile({
						url: this.$request22.baseUrl1+'/File/UploadMutilesFiles?customerName='+that.customerName, 
						filePath: tempFile,
						name: 'fileList',
						method: 'post',
						header: {
							'Content-Type': 'multipart/form-data; charset=UTF-8' ,// 在这里设置编码
							'token': token,
						},
						success: (uploadFileRes) => {
							let result=JSON.parse(uploadFileRes.data)
							if(result.Tag==1){
								console.log(result.Data[0])
								that.fileListOpt.push(result.Data[0])
							}
						},fail(err) {
							console.log(err)
							uni.hideLoading();
							uni.showToast({ title:'上传失败', icon: 'none' });
						}
					});
				}
				// 执行异步操作
				setTimeout(() => {
					resolve();
				}, 3000);
			})
		}
	}
};
</script>

<style lang="less">
	.example-body {
			padding: 10px;
			padding-top: 0;
		}
	
		.custom-image-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	
		.text {
			font-size: 14px;
			color: #333;
		}
.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
</style>